<template>
  <div style="width: 100%;height: 100vh;overflow: hidden">
    <div style="width: 400px;margin: 150px auto">
      <div style="color: #3b2f85;font-size: 30px;text-align: center;padding: 30px">欢迎注册</div>

      <el-form ref="form" :model="form" size="default" :rules="rules">
        <el-form-item prop="username">
          <el-input v-model="form.username" placeholder="请输入注册账号"/>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="form.password" placeholder="请输入密码"/>
        </el-form-item>
        <el-form-item prop="confirm">
          <el-input type="password" v-model="form.confirm" placeholder="请确认密码"/>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%;background-color:#F9D2E4;" @click="register">登录</el-button>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%;background-color:#F9D2E4;" @click="login">退出</el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<script>

import request from "@/utils/request";

export default {
  name: "Register",
  data(){
    return {
      form:{},
      rules:{
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        confirm: [
          { required: true, message: '确认密码', trigger: 'blur' },
        ]
      }
    }
  },
  methods:{
    register(){
      this.$refs['form'].validate((valid)=> {
        if (valid){
          //验证通过才能发请求
          if (this.form.password === this.form.confirm) {
            request.post("/user/register", this.form).then(res => {
              if (res.code === 20000) {
                this.$message({
                  type: "success",
                  message: "注册成功"
                })
                this.$router.push("/login")  //登录成功之后跳转
              } else {
                this.$message({
                  type: "error",
                  message: res.msg
                })
              }
            })
          }


        }
      })
    },
    login(){request.post("user/register",this.form).then(res=>{
      let a=true
      if(a=true){
        this.$router.push('/login')
      }
      })
    }
  }
}
</script>

<style scoped>

</style>
